<template>
  <div class="articleTypes">
    <el-row :gutter="12">
      <transition-group name="list" tag="p">
        <el-col class="m-b-10" :span="4" v-for="(o, index) in articleTypesList" :key="o._id" >
            <el-card shadow="hover" :body-style="{ padding: '0px'}">
              <img :src="o.articleTypeIcon" class="image w-189">
              <div style="padding: 14px;">
                <div >{{o.articleTypeName}}</div>
                <div class="fz-12 h-32 text-ellipsis">简介: {{o.articleTypeDescription}}</div>
                <div class="bottom clearfix">
                  <time class="time">{{ o.updateTime | date}}</time>
                  <el-button type="text" class="button" @click="updateType(index)">编辑</el-button>
                </div>
              </div>
            </el-card>
        </el-col>
      </transition-group>
      <el-col class="m-b-10" :span="4">
        <add-article-type @is-add="getArticleTypesList" class="h-303 b-r-3" style="max-height：303px;"></add-article-type>
      </el-col>
    </el-row>
    <el-dialog
      title="编辑文章类型"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
      center
      :show-close="false">
      <div>
        <el-row class="m-b-10">
          <el-col :span="4"><div class="l-h-40 h-40">类型图标</div></el-col>
          <el-col :span="20">
            <el-upload
              class="avatar-uploader"
              action="http://localhost:3000/admin/uploadArticleTypesIcon"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
              <img v-if="editTypeInfo.articleTypeIcon" :src="editTypeInfo.articleTypeIcon" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-col>
        </el-row>
        <el-row class="m-b-10">
          <el-col :span="4"><div class="l-h-40 h-40">类型名</div></el-col>
          <el-col :span="20"><el-input v-model="editTypeInfo.articleTypeName" placeholder=""></el-input></el-col>
        </el-row>
        <el-row class="m-b-10">
          <el-col :span="4"><div class="l-h-40 h-40">简介</div></el-col>
          <el-col :span="20"><el-input v-model="editTypeInfo.articleTypeDescription" placeholder=""></el-input></el-col>
        </el-row>     
      </div>
      <span slot="footer">
        <el-button type="warning" @click="deleteType(editTypeInfo)">删 除</el-button>
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="save">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import AddArticleType from '../components/AddArticleType'
export default {
  components: {
    AddArticleType
  },
  created() {
    this.getArticleTypesList()
  },
  data() {
    return {
      articleTypesList: [],
      dialogVisible: false,
      editTypeInfo: {
        articleTypeDescription: '',
        articleTypeIcon: '',
        articleTypeName: '',
        createTime: '',
        updateTime: '',
      },
      imageUrl: '',
      
    }
  },
  methods: {
    getArticleTypesList() {
      this.api.get('/admin/article/getArticleTypeList').then(res => {
        if(res.code == 0){
          this.articleTypesList = res.data
        }
      })
    },
    deleteType(item) {
      this.api.get('/admin/article/deleteArticleType', {
        params: {
          id: item._id
        }
      }).then(res => {
        if(res.code == 0) {
          this.dialogVisible = false
          this.getArticleTypesList()
          this.$message({
            message: res.message,
            type: 'success'
          })
        }else {
          this.$message({
            message: res.message,
            type: 'warning'
          })
        }
      }).catch(err => {
        console.log(err)
      })
    },
    handleClose() {},
    updateType(index) {
      this.editTypeInfo = this.articleTypesList[index]
      this.imageUrl = this.articleTypesList[index].articleTypeIcon
      this.dialogVisible = true
    },
    save() {
      this.api.post('/admin/article/updateArticleType', {
        articleTypeDescription: this.editTypeInfo.articleTypeDescription,
        articleTypeIcon: this.editTypeInfo.articleTypeIcon,
        articleTypeName: this.editTypeInfo.articleTypeName,
        id: this.editTypeInfo._id
      }).then(res => {
        if(res.code == 0) {
          this.dialogVisible = false
          this.getArticleTypesList()
          this.$message({
            message: res.message,
            type: 'success'
          })
        }else {
          this.$message({
            message: res.message,
            type: 'warning'
          })
        }
      }).catch(err => {
        console.log(err)
      })
    },
    cancel() {
      this.dialogVisible = false
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.editTypeInfo.articleTypeIcon = res.data.address
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isLt2M;
    }
  }
}
</script>

<style lang="scss">
.articleTypes{
  .time {
    font-size: 13px;
    color: #999;
  }
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }
  .button {
    padding: 0;
    float: right;
  }
  .image {
    width: 100%;
    display: block;
  }
  .avatar-uploader{
    .el-upload {
      border-radius: 5px;
      border: 1px solid black;
      &:hover{
        border: 1px dotted #409EFF;
      }
    }
  } 
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }
  .list-enter-active, .list-leave-active {
    transition: all 1s;
  }
  .list-enter, .list-leave-to{
    opacity: 0;
    transform: translateY(40px);
  }
}
</style>